{% extends "pages.html" %}
{% block subTitle %}A Link Shortening Service{% endblock %}
{% block script %}
Go2.SetCSRF("{{csrf}}");

var txtUsername;
var txtLink;
var txtTitle;

function Loaded()
{
	txtUsername = document.getElementById('username');

	txtLink = document.getElementById("link");
	txtTitle = document.getElementById("title");
	
	Go2.AddEventFn(txtLink, "keydown", function(evt)
		{
		if (evt.keyCode == 13)
			{
			txtTitle.focus();
			evt.preventDefault();
			}
		});

	Go2.AddEventFn(txtTitle, "keydown", function(evt)
		{
		if (evt.keyCode == 13)
			{
			Shorten();
			}
		});

	if (txtUsername)
		{
		txtUsername.focus();
		Go2.AddEventFn(txtUsername, "keydown", function(evt)
			{
			if (evt.keyCode == 13)
				Go2.SetUsername(txtUsername.value);
			});
		}
	else
		txtLink.focus();
}

function Shorten()
{
	Go2.Map(txtLink.value, txtTitle.value);
}

{% endblock %}

{% block pagebody %}
<a target="_top" href="/"><img title="{{site_name}}" class="logo" src="/images/logo.png"></a>
<h1 style="padding-top: 30px;">A Link Shortening Service</h1>
<p class="subhead">Shorten, Share, and Comment - then see what others are doing</p>

<div class="left">

<h2>Install the bookmarklet</h2>
<p>Just drag this bookmarklet to your bookmarks toolbar*:</p>
<p style="margin: 10px 100px;">
<a style="font-size: 24px;" title="Drag me to your bookmarks toolbar"
   onclick="alert('Instead of clicking this link, you need to drag it to your toolbar.');return false;"
   href="javascript:location.href='{{host}}map/?url='+encodeURIComponent(location)+'&title='+encodeURIComponent(document.title);">{{site_name}}
</a>
</p>

<h2>What is {{site_name}}?</h2>
<ul>
	<li><b>Free</b> - {{site_name}} is free hyperlink shortening service - use it to turn any link into a short one.</li>
	<li><b>Short</b> - {{site_name}} links are only 16 characters long <i>(for comparison, tinyurl links are 25 characters long)</i> -
	perfect for embedding in <a href="http://twitter.com">Twitter</a> or IM messages
	(e.g., <a href="http://{{site_host}}/G">http://{{site_host}}/G</a>)
	</li>
	<li><b>Comments</b> - Exchange comments at the top of any shared {{site_name}} page.</li>
	<li><b>Analytics</b> - Each {{site_name}} page displays the number of viewers	so you can see how often your link has been viewed.</li>
	<li><b>Personalized</b> - Pick a username, and use it with all your comments.  You can then get a summary of all your most recently shared links.</li>
	<li><b>Tags</b> - Add a tag, and then click on the tag link to see the most popular links for that tag -
	it's a great way to find out what others are sharing.</li>
</ul>

<h2>Shorten a link now:</h2>
<p>If you can't install the bookmarklet, you can still shorten a link
by typing into this form.
<table>
<tr><th><label for="link">Link (URL):</label></th><td><input id="link" style="width:220px;" value="http://"/></td></tr>
<tr><th><label for="title">Title (opt):</label></th><td><input id="title" style="width:220px;"/></td></tr>
<tr><th></th><td style="text-align:right;"><input type="button" onclick="Shorten();" value="Shorten"/></td></tr>
</table>
</p>

<i>
* Installation instructions for Internet Explorer:
<ul>
	<li>Right click on the {{site_name}} link (above)</li>
	<li>Select "Add to Favorites..."</li>
	<li>Click "Yes" when you see the Security Alert.</li>
	<li>Select "Links" in the "Create In" dropdown.</li>
	<li>Click "Add"</li>
</ul>
</i>

<div style="text-align:center;">
<a href="http://code.google.com/p/g02me/">
<img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif"
alt="Powered by Google App Engine" /></a>
</div>

<div style="text-align:center;padding-top:20px">
<iframe src="http://www.google.com/talk/service/badge/Show?tk=z01q6amlqhrl17p9n10jauhlnrj43o58f0q6mro09fpgobnd4ebvqmkmrtmt1ntg7b3jlohj0253417t9tp4mcumsmgtig277c7jdvp3govn5p9jvoq6lmsnr7qjirqdq0ahr0pd9t2n48qpdafpqu6f41le3nph14uh83m92fgqrtlt7c1dillnedf4e1cn60o&amp;w=200&amp;h=60" allowtransparency="true" width="200" frameborder="0" height="60"></iframe>
</div>

</div> <!-- left -->

<div class="right">
<h2>Recently popular links</h2>
<p class="subhead">{{total_pages}} pages shared to date.</p>
<table class="scores">
<tr><th>Title</th><th>Shared</th><th>Viewed</th><th>Comments</th><th>Created</th></tr>
{% for page in pages %}
	{% if page.ModelExists %}
	<tr>
		<td><a href="/{{page.model.GetId}}" title="{{page.model.url|escape}}">{{page.model.title|escape}}</a></td>
		<td class="num">{{page.model.shareCount}}</td>
		<td class="num">{{page.model.viewCount}}</td>
		<td class="num">{{page.model.CommentCount}}</td>
		<td class="age">{{page.model.Age}}
			{% if page.model.Creator %}
				<br/>by <a href="/user/{{page.model.Creator}}">{{page.model.Creator}}</a>
			{% endif %}
		</td>
	</tr>
	{% endif %}
{% endfor %}
</table>

</div> <!-- right -->
{% endblock %}
